
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
//   const camera = new THREE.OrthographicCamera(10, 10, 10, 10, -200, 500);
  camera.position.set(0, 100, 0);
  camera.lookAt(scene.position);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(400, 400);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);
  
  scene.add(new THREE.AmbientLight(0xffffff));
  scene.add(new THREE.CameraHelper( camera ));
  
  let sceneR = Math.sin(Math.PI * (45/2)/180) * 100;
  let canvasW = sceneR * 2;
  let canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.width = canvasW;
  canvas.height = canvasW;
  canvas.style.width = '400px'
  canvas.style.height = '400px'
  canvas.style.position = 'fixed'
  canvas.style.top = 0;
  canvas.style.left = 0;
  console.log(canvasW, sceneR);
  document.body.appendChild(canvas);
  
  
  let canvasPoints = []
  
  const geom = new THREE.SphereBufferGeometry(2, 32, 32);
  let mater = new THREE.MeshStandardMaterial({
    color: 0xffffff,
  });
  let mesh = new THREE.Mesh(geom, mater);
  mesh.position.set(0, 0, 0);
  
  ctx.beginPath();
  ctx.strokeStyle = '#ffffff';

  for (let i = 0; i < 3; i++) {
    let x = Math.random() * canvasW - sceneR;
    let z = Math.random() * canvasW - sceneR;
    let mesh2 = mesh.clone();
    mesh2.position.set(x,0,z);
    canvasPoints.push([sceneR + x, sceneR + z]);
    scene.add(mesh2);
  }

  //scene.add(mesh);
  canvasPoints.forEach((item, i) => {
    //debugger
    if (i) {
      ctx.lineTo(...item)
    } else {
      console.log(item)
      ctx.moveTo(...item)
    }
  })
  ctx.stroke();
  console.log(canvasPoints)
  
  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();
</script>